<template>
  <div class="sidebarKingkong">
    <div
      v-for="item in activeList"
      :key="item.id"
      class="item"
      v-click-move
      @click="handleClick(item)"
    >
      <div class="imgMaxBox">
        <div class="imgBox">
          <NuxtImg :src="item.img" />
        </div>
      </div>
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("home");
const activeList = reactive([
  {
    id: 1,
    img: "/images/home/activity/VIP.png",
    title: lang.vip,
    routeName: "activity-vip",
  },
  {
    id: 2,
    img: "/images/home/activity/Convite.png",
    title: lang.convite,
    routeName: "ranking-treasure-chest",
  },
  {
    id: 3,
    img: "/images/home/activity/Slot.png",
    title: lang.slot,
    routeName: "activity-slot",
  },
  {
    id: 4,
    img: "/images/home/activity/Tesouro.png",
    title: lang.tesouro,
    routeName: "activity-tesouro",
  },
  {
    id: 5,
    img: "/images/home/activity/Cupom.png",
    title: lang.cupom,
    routeName: "activity-coupon",
  },
  {
    id: 6,
    img: "/images/home/activity/Agente.png",
    title: lang.agente,
    routeName: "activity-agente",
  },
  {
    id: 7,
    img: "/images/home/activity/Resgatar.png",
    title: lang.resgatar,
    routeName: "activity-resgatar",
  },
  {
    id: 8,
    img: "/images/home/activity/Check-in.png",
    title: lang.checkIn,
    routeName: "activity-checkin",
  },
  {
    id: 9,
    img: "/images/home/activity/Acumulada.png",
    title: lang.acumulada,
    routeName: "activity-acumulada",
  },
]);

const userStore = useUserStore();
function handleClick(item: any) {
  if (!userStore.isLogin) {
    userStore.changeShowLogin(true);
    return;
  }

  navigateTo({ name: item.routeName });
}
</script>

<style lang="scss" scoped>
.sidebarKingkong {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.93rem;
  row-gap: 0.32rem;
  max-height: 8.4rem;
  padding: 0 0.32rem;
}
.sidebarKingkong .item .imgMaxBox {
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("/images/home/activity/Button_B_Def.png");
  background-size: 100% 100%;
}
.sidebarKingkong .item .imgBox {
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebarKingkong .item .imgBox img {
  height: 1.2rem;
  width: 1.2rem;
}
.sidebarKingkong .item p {
  margin-top: 0.2rem;
  text-align: center;
  color: var(--theme-neutral1);
}
</style>
